import React, { memo, useState, useEffect } from "react";
import { useSelector, shallowEqual, useDispatch } from "react-redux";
import { artistAlbumAction } from "../store/actionType";
import { AlbumRightWrap } from "./style";
import { getSizeImage, getYearMonthDay } from "@/utils/format-utils";
import { NavLink } from "react-router-dom";

export default memo(function AlbumRight() {
  const dispatch = useDispatch();

  const { album } = useSelector(
    (state) => ({
      album: state.getIn(["albumPage", "albums"]),
    }),
    shallowEqual
  );

  const artistId = album.album ? album.album.artist.id + "" : "";
  const albumId = album.album ? album.album.id + "" : "";

  useEffect(() => {
    dispatch(artistAlbumAction(artistId));
  }, [dispatch, artistId]);

  const { artistAlbum } = useSelector(
    (state) => ({
      artistAlbum: state.getIn(["albumPage", "artistAlbum"]),
    }),
    shallowEqual
  );

  return (
    <AlbumRightWrap>
      <div className="hot-album-box">
        <p>Ta的其他热门专辑</p>
        <NavLink
          to={{
            pathname: "/artist/album",
            search: "?id=" + artistId,
          }}
        >
          全部&gt;
        </NavLink>
      </div>
      <div className="hot-album-img">
        <ul>
          {artistAlbum.code === 200
            ? artistAlbum.hotAlbums.slice(0, 5).map((item, index) => {
                return (
                  <li key={item.id}>
                    <NavLink
                      to={{
                        pathname: "/album",
                        search: "?id=" + item.id,
                      }}
                    >
                      <img src={getSizeImage(item.picUrl, 50)} alt="" />
                    </NavLink>
                    <div className="artistAlbum-text">
                      <NavLink
                        to={{
                          pathname: "/album",
                          search: "?id=" + item.id,
                        }}
                      >
                        <p className="top-name">{item.name}</p>
                      </NavLink>
                      <p>{getYearMonthDay(item.publishTime)}</p>
                    </div>
                  </li>
                );
              })
            : ""}
        </ul>
      </div>
    </AlbumRightWrap>
  );
});
